<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id='but'>
        upData
    </button>

    <script>
        // // 原则 设计模式
        // //单一职责原则 localStore
        // function View(url, data, dom, flag) {

        //     //判断是否有网
        //     if (navigator.onLine) {

        //     }
        //     if (localStore.getItem('list') && !flag) {
        //         arr.forEach((ele) => {
        //             htmlStr += `<li>+${ele.name}+</li>`;
        //         });
        //         dom.innerHTML = htmlStr;
        //     } else {
        //         $.ajax({
        //             url,
        //             data,
        //             success: (json) => {
        //                 let arr = JSON.parse(json);
        //                 let htmlStr = '';
        //                 //缓存数据
        //                 localStore.setItem('list', json)
        //                 //渲染数据功能
        //                 arr.forEach((ele) => {
        //                     htmlStr += `<li>+${ele.name}+</li>`;
        //                 });
        //                 dom.innerHTML = htmlStr;
        //             }
        //         })
        //     }
        //     //获取数据功能

        // }
        // View(url, data, ul)
        // //更新数据
        // btn.onclick = () => {
        //     View(url, data, ul, true)
        // }

        //单一原则
        function GetData(callBackArr) {
            this.getData = function (url,param){
                $.ajax({
                    url,
                    data,param,
                    success:function(json){
                        callBackArr.forEach(ele,index){
                            ele.do(JSON.parse(json))
                        }
                    }
                })
            }

        }
        let oG = new GetData({oR,oC})

        //数据渲染
        function Render(dom) {

            this.do(data) = function () {
                arr.forEach((ele) => {
                    htmlStr += `<li>+${ele.name}+</li>`;
                });
                dom.innerHTML = htmlStr;
            }
        }
        const oR = new Render('ul');

   
        function CacheData(type) {

            //缓存数据
            this.do = function (data){
                localStorage.setItem(type,data);
            }

            //获取数据
            this.returnData = ()=>{

                return localStorage.getItem(type);
            }
        }
        const oC = new CacheData('list')

        //在线
        if(navigator.onLine){
            if(oC.returnData()){
                oR.do(oC.returnData())
            }else{
                oG.getData()
            }
        }else{
        //离线
            if(oC.returnData()){
                oR.do(oC.returnData())
            }else{
                alert('处于离线状态，无法获取数据')
            }
        }
    </script>
</body>

</html>